<template>
	<div class="PersonalHomepage">
		<HeaderTab>
			<div slot="left">
				<router-link to="/mine" class="glyphicon glyphicon-menu-left return_but"></router-link>
			</div>
			<div slot="center" class="PersonalHomepage_header_center">
				个人主页
			</div>
		</HeaderTab>
		<div class="Head_portrait_box">
			<div class="Headportrait_litlebox">
				<img class="Headportrait" :src="img_item?img_item:require('assets/img/Head_portrait/Headportrait.png')" alt=""></div>
		</div>
		<div class="Works_statistics_box">
			<div class="Already_statistics_box">
				<span>{{user_information.original_book}}</span>
				<p>已审核</p>
			</div>
			<div class="statistics_box">
				<span>{{user_information.original_book + user_information.Noaudit_original}}</span>
				<p>全部作品</p>
			</div>
			<div class="No_statistics_box">
				<span>{{user_information.Noaudit_original}}</span>
				<p>未审核</p>
			</div>
		</div>
		<div class="persona_news_box">
			<ul>
				<li><p>用户名称：</p><span>{{user_information.username}}</span></li>
				<li><p>邮箱地址：</p><span>{{user_information.email}}</span></li>
				<li><p>手机号码：</p><span>{{user_information.phone_number}}</span></li>
				<li><p>用户身份：</p><span>{{user_information.identity}}</span></li>
			</ul>
		</div>
	</div>
</template>

<script>
	import HeaderTab from 'common/HeaderTab/HeaderTab.vue'
	
	export default {
		name: 'PersonalHomepage',
		components: {
			HeaderTab
		},
		data() {
			return {
			img_item: false,
			userid: this.$store.state.userid,
			user_information: {}
			}
		},
		created() {
			this.axios.get('http://192.168.43.169/api/userquery/'+this.userid).then((response) => {
				if (response.data.code = 200) {
					this.user_information = response.data.data[0]
				} else{
					this.user_information = {}
				}
			  }
			)
		}
	}
	
</script>

<style>
	.PersonalHomepage_header_center{
		width: 56%;
		text-align: center;
		line-height: 40px;
		float: left;
		font-size: 15px;
		font-weight: 800;
		color: #D9EDF7;
	}
	.Head_portrait_box{
		width: 100%;
		/* height: 150px; */
		background-color:  rgb(0,164,180);
		margin-top: 41px;
		padding-top: 10px;
		padding-bottom: 20px;
	}
	.Headportrait_litlebox{
		width: 20%;
		height: 20%;
		margin: 0 auto;
	}
	.Headportrait_litlebox img{
		width: 100%;
		height: 100%;
	}
	.Works_statistics_box{
		width: 100%;
		height: 80px;
		background-color: rgb(245,246,247);
		margin-top: 10px;
		display: flex;
		justify-content: space-around;
	}
	.Already_statistics_box,.statistics_box,.No_statistics_box{
		width: 20%;
		height: 80%;
		float: left;
		margin-top: 2%;
		position: relative;
	}
	.Already_statistics_box p,.statistics_box p,.No_statistics_box p{
		height: 30%;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: center;
		font-size: 110%;
	}	
	.Already_statistics_box span,.statistics_box span,.No_statistics_box span{
		height: 30%;
		position: absolute;
		top: 10px;
		left: 0;
		right: 0;
		text-align: center;
		font-size: 116%;
	}
	.persona_news_box{
		width: 100%;
		padding: 10px 0;
		margin-top: 20px;
		background-color: rgb(245,246,247);
	}
	.persona_news_box ul{
		padding-left: 0;
	}
	.persona_news_box li{
		list-style: none;
		border-bottom: white 2px solid;
		height: 40px;
		line-height: 40px;
		padding-left: 20px;
	}
	.persona_news_box li p{
		display: inline-block;
		margin-right: 30px;
	}
</style>
